<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>书籍购物车案例</title>
		<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
		<div id="cart">
			<div v-if="list.length">
				<table border="1">
					<thead>
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in list">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.data}}</td>
							<td>{{item.price | showPrice}}</td>
							<td>
								<button
									@click="decrement(index)"
									v-bind:disabled="item.count <= 1"
								>
									-
								</button>
								{{item.count}}
								<button @click="increment(index)">+</button>
							</td>
							<td>
								<button @click="removeHandle(index)">
									移除
								</button>
							</td>
						</tr>
					</tbody>
				</table>
				<h4>总价：{{totalPrice | showPrice}}</h4>
			</div>
			<h2 v-else>购物车为空！</h2>
		</div>
		<script src="../lib/vue.js"></script>
		<script src="./main.js"></script>
	</body>
</html>
